<div>
  <div class="flex-ver-cnt-cnt modal-background">
    <div class="close-btn" (click)="onModelClose()">
      <ion-icon name="close" color="white" size="large"></ion-icon>
    </div>

    <div class="appointment-button" (click)="onAppointmentHospital()"></div>
  </div>

  <div style="font-size: 12px; padding: 5px">
    <div>
      {{noticeTitle}}
      <a [href]="passportNoticeUrl">{{passportNoticeUrl}}</a>
    </div>
    <div class="base-margin-top">
      {{noticeContent}}
    </div>
    <div class="base-margin-top" *ngIf="cityAreaList.length > 0">
      {{cityAreaContent}}
    </div>

    <div class="base-margin-top">
      <ion-button *ngFor="let item of cityAreaList" size="small" (click)="onCityAreaClick(item)">{{item.region_name}}</ion-button>
    </div>
  </div>

  <div class="flex-hor-sa-cnt ion-padding">
    <ion-button shape="round" color="dark" expand="full" style="width: 50%; margin-right: 10px;"
                (click)="onModelClose()">{{'Close' | translate}}</ion-button>

    <ion-button shape="round" color="care" expand="full" style="width: 50%; margin-left: 10px;"
                (click)="onAppointmentHospital()">{{'AppointmentNow' | translate}}</ion-button>
  </div>
</div>
